<template>
  <view class="income-detail-counter">
    <view class="top-type-main">
      <view class="income-type-main">
        <view
          class="items-income"
          v-for="item in dishIncomeType"
          :key="item.id"
          :class="{ active: selectIncome == item.id }"
          @click="handleSelectIncome(item)"
          >{{ item.name }}</view
        >
      </view>

      <view class="show-pack_up" @click="handleShowPack">
        <text>{{ showAllFlag ? "收起" : "展开全部" }}</text>
        <u-icon
          :name="showAllFlag ? 'arrow-up' : 'arrow-down'"
          size="13"
          color="#999"
        ></u-icon>
      </view>
    </view>

    <!-- list -->
    <view class="income-list-counter">
      <!-- list -->
      
      <!-- none-data -->
      <u-empty mode="list" text="暂无数据～" class="none-empty">
      </u-empty>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      incomeType: [
        { id: 1, name: "全部" },
        { id: 2, name: "订单" },
        { id: 3, name: "红包" },
        { id: 4, name: "提现" },
        { id: 5, name: "百万合伙人" },
        { id: 6, name: "保证金" },
        { id: 7, name: "违约金" },
        { id: 8, name: "购物" },
        { id: 9, name: "严选师傅" },
        { id: 10, name: "好评返现" },
        { id: 11, name: "赔偿金" },
        { id: 12, name: "活动奖励" },
        { id: 13, name: "售后运费" },
      ],
      showLimit: 8,
      selectIncome: 1,
      showAllFlag: false,
    };
  },
  computed: {
    dishIncomeType() {
      return this.showAllFlag
        ? this.incomeType
        : this.incomeType.slice(0, this.showLimit);
    },
  },
  mounted() {},
  methods: {
    handleSelectIncome(item) {
      this.selectIncome = item.id;
    },
    handleShowPack() {
      this.showAllFlag = !this.showAllFlag;
    },
  },
};
</script>

<style lang="scss" scoped>
.income-detail-counter {
  overflow: auto;
  .top-type-main {
    padding: 24rpx;
    box-sizing: border-box;
    margin-top: 20rpx;
    background: #fff;
  }
  .income-type-main {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20rpx 26rpx;
    .items-income {
      width: 150rpx;
      padding: 20rpx 0;
      border-radius: 8rpx;
      background: #f8f8f8;
      text-align: center;
      font-size: 24rpx;
      color: #333;
      border: 2rpx solid transparent;
      &.active {
        border-color: #76bed7;
        color: #76bed7;
        background: #fff;
      }
    }
  }
  .show-pack_up {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14rpx;
    margin-top: 20rpx;
    text {
      font-size: 26rpx;
      color: #999;
    }
  }

  .income-list-counter {
    margin-top: 100rpx;
  }
}
</style>
